<!--弹窗form表单组件-->
<template>
  <el-form label-width="100px" :model="form" :inline="inline"
    ><!--数据双向绑定以及设置布局单行-->
    <el-form-item
      v-for="item in formLabel"
      :key="item.label"
      :index="item.label"
      ><!--渲染表单这里的表单组件同样要引入-->
      <el-input
        v-if="item.type === 'input'"
        :placeholder="'请输入' + item.label"
        v-model="form[item.model]"
      >
      </el-input>
      <el-swich
        v-if="item.type === 'swich'"
        v-model="form[item.model]"
      ></el-swich>
      <!--下拉菜单-->
      <el-select
        v-if="item.type === 'select'"
        placeholder="请选择"
        v-model="form[item.model]"
      >
        <!--下拉内容-->
        <el-option
          v-for="item in item.opts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          ><!--value默认被绑定--></el-option
        >
      </el-select>
    </el-form-item>
    <!--如果都不满足就定义插槽拓展-->
    <el-form-item><slot></slot></el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CommonForm",
  props: {
    formLabel: Array, //相关配置
    form: Object, //数据
    inline: Boolean, //布局
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>
